<template>
    <div class="app-container">
        <div class="wrapper">
            <el-row class="row-bgs" justify="center">
                <el-col :span="8">
                    <div class="typicalBuildVulner" @click="importParmsClick('typicalBuildVulner')"></div>
                </el-col>
                <el-col :span="8">
                    <div class="lifelineEngineerVulner" @click="importParmsClick('lifelineEngineerVulner')"></div>
                </el-col>
                <el-col :span="8">
                    <div class="majorEngineerVulner" @click="importParmsClick('majorEngineerVulner')"></div>
                </el-col>
            </el-row>
        </div>
    </div>
</template> 
  
<script setup>
// 全局路由对象
const router = useRouter();
//导入跳转
const importParmsClick = (val) => {
    switch (val) {
        case 'typicalBuildVulner':
            router.push({ path: '/disasterDataManagement/importData/buildingAreaInfo' });
            break;
        case 'lifelineEngineerVulner':
            router.push({ path: '/disasterDataManagement/importData/lifelineSystemData' });
            break;
        case 'majorEngineerVulner':
            router.push({ path: '/disasterDataManagement/importData/majorEngineerFac' });
            break;
        default:
            break;
    }
}
</script>
  
<style lang="scss">
.wrapper {
    position: relative;

    .row-bgs {
        width: 100%;
        display: flex;
        margin-bottom: 30px;

        &:last-child {
            margin-bottom: 0;
        }

        div {
            width: 360px;
            height: 150px;
            display: flex;
            justify-content: center;
        }

        .typicalBuildVulner {
            background: url("../../../../assets/importImages/dxjzw.png");
        }

        .lifelineEngineerVulner {
            background: url("../../../../assets/importImages/smxgc.png");
            margin: 0 20px;
        }

        .majorEngineerVulner {
            background: url("../../../../assets/importImages/zdgcss.png");
        }
    }
}
</style>
